<script setup lang="ts">
import { onMounted, ref, useTemplateRef } from 'vue'
import Modal from '../../components/dialog/Modal.vue'
import TodoEditDialog from '../../components/dialog/TodoEditDialog.vue'
let dialog = useTemplateRef<HTMLDialogElement>('dialog')
let modal = useTemplateRef<InstanceType<typeof Modal>>('modal')
let todo_edit_dialog = useTemplateRef<InstanceType<typeof TodoEditDialog>>('todo_edit_dialog')
onMounted(() => {
  console.log('mounted')
  dialog.value?.addEventListener('close', () => {
    console.log('close')
    console.log(`return value: ${dialog.value?.returnValue}`)
  })
})

let handleOpenDialog = () => {
  dialog.value?.showModal()
}
let handleOpenDialog1 = () => {
  dialog.value?.close()
}
let handleOpenDialog2 = () => {
  dialog.value?.close('ccc')
}
let handleOpenDialog3 = () => {
  modal.value?.open()
}
function handleOpenTodoEditDialog() {
  todo_edit_dialog.value?.open({
    title: 'test title',
    description: 'test description',
    status: true,
    id: 0
  })
}

</script>

<template>
  <h1 class="font-bold">Test dialog tag</h1>
  <dialog ref="dialog">
    <p>Greetings, one and all!</p>
    <p>Greetings, one and all!</p>
    <p>Greetings, one and all!</p>
    <p>Greetings, one and all!</p>
    <p>Greetings, one and all!</p>
    <p>Greetings, one and all!</p>
    <p>Greetings, one and all!</p>
    <p>Greetings, one and all!</p>
    <!-- 阻止form自动提交 -->


    <form method="dialog">
      <!-- 修改此处，添加 type="button" 以阻止表单提交 -->
      <button type="button" value="">OK1</button>
      <button value="aaa">OK2</button>
      <button value="bbb">OK3</button>
      <div><button @click="handleOpenDialog1">close dialog</button></div>
      <div><button @click="handleOpenDialog2">close dialog2</button></div>
    </form>
  </dialog>
  <div><button @click="handleOpenDialog">open dialog</button></div>
  <h1 class="font-bold">Test Modal</h1>
  <Modal ref="modal"></Modal>
  <div><button @click="handleOpenDialog3">open dialog3</button></div>
  <h1 class="font-bold">Test TodoEditDialog</h1>
  <TodoEditDialog ref="todo_edit_dialog"></TodoEditDialog>
  <div><button @click="handleOpenTodoEditDialog">open todo edit dialog</button></div>

</template>

<style scoped>
/**
为dialog添加一个显示动画，从下往上
*/
dialog {
  animation: slide-up 0.3s ease-out;
}
@keyframes slide-up {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
</style>